<template>
  <div class="edit">
    <van-nav-bar
      title="编辑资料"
      left-arrow
      @click-left="$router.push('/layout/mine')"
    />
    <van-uploader
      :before-read="beforeRead"
      style="width:100%;"
      :after-read="afterRead"
    >
      <div class="img">
        <img class="avatar" :src="userInfo.photo" alt="" />
      </div>
    </van-uploader>
    <van-cell-group>
      <van-cell
        title="名称"
        :value="userInfo.name"
        is-link
        @click="nameShow = true"
      />
      <van-cell
        @click="genderShow = true"
        title="性别"
        :value="userInfo.gender ? '男' : '女'"
        is-link
      />
      <van-cell
        title="生日"
        @click="birthdayShow = true"
        :value="userInfo.birthday"
        is-link
      />
    </van-cell-group>
    <van-popup v-model="nameShow" style="width:80%;border-radius: 10px;">
      <h3 class="title">修改姓名</h3>
      <van-field v-model="name"></van-field>
      <div class="btn">
        <van-button @click="nameShow = false">取消</van-button>
        <van-button @click="nameSubmit">确定</van-button>
      </div>
    </van-popup>
    <van-popup v-model="genderShow" position="bottom">
      <van-nav-bar
        title="修改性别"
        left-text="取消"
        @click-left="genderShow = false"
      />
      <van-cell title="男" is-link @click="genderSubmit(1)" />
      <van-cell title="女" is-link @click="genderSubmit(0)" />
    </van-popup>
    <van-popup v-model="birthdayShow" position="bottom">
      <van-datetime-picker
        v-model="birthday"
        type="date"
        title="选择 年 月 日"
        :min-date="minDate"
        :max-date="maxDate"
        @cancel="cancelEvent"
        @confirm="birthdaySubmit"
      />
    </van-popup>
    <div class="box" v-if="cropShow">
      <VueCropper
        ref="cropper"
        :img="cropImg"
        autoCrop
        autoCropWidth="200px"
        autoCropHeight="200px"
        fixedBox
      />
      <div class="btn">
        <van-button @click="cropShow = false">取消</van-button>
        <van-button type="info" @click="cropSubmit">裁切</van-button>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import { userPhotoPatch, userProfilePatch } from '@/api/user'
import momnet from 'moment'
import { VueCropper } from 'vue-cropper'
export default {
  components: {
    VueCropper
  },
  data () {
    return {
      nameShow: false,
      genderShow: false,
      birthdayShow: false,
      cropShow: false,
      birthday: new Date(this.$store.state.userInfo.birthday),
      minDate: new Date('1900', '01', '01'),
      maxDate: new Date('2025', '12', '31'),
      cropImg: '',
      name: ''
    }
  },
  watch: {
    userInfo: {
      handler (newVal) {
        this.name = newVal.name
      }
    }
  },
  computed: {
    ...mapState(['userInfo'])
  },
  created () {
    this.$store.dispatch('getUserInfo')
  },
  methods: {
    async setUser (key, value) {
      if (value === '' || value === this.userInfo[key]) {
        this.$toast.fail('你没做任何修改哦')
        return
      }
      await userProfilePatch({
        [key]: value
      })
      this.$store.commit('setUserInfo', {
        ...this.userInfo,
        [key]: value
      })
      this.$toast.success('修改成功！')
    },
    async nameSubmit () {
      await this.setUser('name', this.name)
      this.nameShow = false
    },
    async genderSubmit (gender) {
      await this.setUser('gender', gender)
      this.genderShow = false
    },
    cancelEvent () {
      this.birthdayShow = false
      this.birthday = new Date(this.userInfo.birthday)
    },
    async birthdaySubmit () {
      await this.setUser('birthday', momnet(this.birthday).format('YYYY-MM-DD'))
      this.birthdayShow = false
    },
    beforeRead (file) {
      const limiType = file.type === 'image/jpeg' || file.type === 'image/png'
      if (!limiType) {
        this.$toast.fail('请上传1M内的jpg/png格式图片')
      }
      const limiSize = file.size / 2848 / 2048 < 1
      if (!limiSize) {
        this.$toast.fail('请上传2M内的jpg/png格式图片')
      }
      return limiType && limiSize
    },
    afterRead (res) {
      this.cropShow = true
      this.cropImg = res.content
    },
    cropSubmit () {
      this.$refs.cropper.getCropBlob(async data => {
        const formdata = new FormData()
        formdata.append('photo', data)
        const res = await userPhotoPatch(formdata)
        this.cropShow = false
        this.$toast.success('头像修改成功！')
        this.$store.commit('setUserInfo', {
          ...this.userInfo,
          photo: res.data.data.photo
        })
      })
    }
  }
}
</script>

<style lang="less" scoped>
.van-nav-bar {
  ::v-deep.van-icon {
    color: #fff;
  }
}
.img {
  width: 100vw;
  text-align: center;
  .avatar {
    width: 160px;
    height: 160px;
    border-radius: 50%;
    object-fit: cover;
    background-color: #000;
    margin: 10px 0;
  }
}
.title {
  text-align: center;
  line-height: 3em;
  border-bottom: 1px solid #ccc;
  background-color: #3196fa;
  color: white;
}
.btn {
  display: flex;
  .van-button {
    flex: 1;
  }
}
.box {
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  width: 100vw;
  background-color: rgba(0, 0, 0, 0.3);
  .btn {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100vw;
    display: flex;
    justify-content: space-between;
  }
}
</style>
